import styled from "@emotion/styled"
import { AnimatePresence, motion } from "motion/react"
import { createLogger } from "@/utils/logger"
import StepHeader from "./layouts/StepHeader"
import StepLayout from "./layouts/StepLayout"
import { useEffect } from "react"
import { kycForm } from "@/forms"
import { createPortal } from "react-dom"
import ModalSlideUp, { ModalSlideUpStaticMethods } from "@/components/composite/ModalSlideUp/main"
import { css } from "@emotion/react"
import KycPageSignals from "@/features_signal/kycPageSignals"
import ENV from "@/utils/env"

const logger = createLogger("KycPage")

const Layout = styled(motion.div)`
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    font-family: "Gilroy";
    background-color: #f5f5f5;
`

function CurrentContent() {
    return (
        <StepLayout>
            <KycPageSignals.CurrentStepComponent.value />
        </StepLayout>
    )
}

function KycPage() {
    const form = kycForm.useForm({
        disabled: KycPageSignals.formDisabled.peek(),
        // @ts-ignore
        values: KycPageSignals.formDefaultValues.value,
        mode: "onSubmit",
    })

    useEffect(() => {
        ModalSlideUpStaticMethods.closeAll()
        KycPageSignals.fetchKyc()
        return () => {
            KycPageSignals.resetStage()
            KycPageSignals.resetFormData()
        }
    }, [])

    const formValues = form.watch()

    useEffect(() => {
        KycPageSignals.cachedFormData.value = formValues
    }, [formValues])

    return (
        <AnimatePresence
            key={KycPageSignals.currentStageIndex.value}
            mode="wait"
        >
            <Layout
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
            >
                <kycForm.FormProvider {...form}>
                    <StepHeader />
                    <CurrentContent />
                    {createPortal(<ModalSlideUp familyName="kyc-page" />, document.body)}
                </kycForm.FormProvider>
                {ENV.dev_mode && (
                    <div
                        css={css`
                            position: fixed;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;
                            background-color: transparent;
                            margin-bottom: 16rem;
                            margin-left: 16rem;
                            margin-right: 16rem;
                            z-index: 1000;
                        `}
                    >
                        <button onClick={KycPageSignals.prevStage}>Prev</button>
                        <button onClick={KycPageSignals.nextStage}>Next</button>
                    </div>
                )}
            </Layout>
        </AnimatePresence>
    )
}

export default KycPage
